<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
        <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="${pageContext.request.contextPath}/back/jquery/jquery-1.8.3.js"
	type="text/javascript"></script>
<style type="text/css">
	table{
		width: 900px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 13px;
	}
	tr{ height: 50px;}
	tr th{background-color: lightgreen}
	h2{	margin-top:15%;		text-align: center;	}
body
{
 margin:0; padding:0; font-size:15px; font-family:"微软雅黑";
}
a:link {
 color:#3f3f3f; text-decoration: none;
}
a:visited {
 text-decoration:none; color: #3f3f3f;
}
a:hover {
 text-decoration:none; color: #f46662;
}
a:active {
 text-decoration: none; color:#f46662;
}
#main
{
 width:100%; background-color:#fafafa; border-top:#d1d1d1 1px solid; margin-top:10px; border-bottom:#32a1e3 4px solid; overflow:hidden;
}
#menu
{
 width:900px; margin:0 auto;
}
.m1
{
float:left; width:100px; text-align:center; color:#3a3a3a;  border-right:#bfbfbf 1px dotted;  padding:10px; padding-top:13px; cursor:pointer; background-repeat:no-repeat; background-position:10px 12px;
}

</style>
<script type="text/javascript">
$(function(){

$(".m1").mouseover(function(){
 $(this).css("background-image","url('/imagesforcode/201208/bg.png')");
}
).mouseout(function(){
$(this).css("background-image","none");
});
$("#wzf").click(function(){
		$("#both").css("display","none");
		$("#yizf").css("display","none");
		$("#wancheng").css("display","none");
		$("#tuipiao").css("display","none");
		$("#weizf").css("display","block");
});
$("#yzf").click(function(){
	$("#both").css("display","none");
	$("#weizf").css("display","none");
	$("#wancheng").css("display","none");
	$("#tuipiao").css("display","none");
	$("#yizf").css("display","block");
});
$("#ywc").click(function(){
	$("#both").css("display","none");
	$("#yizf").css("display","none");
	$("#wancheng").css("display","block");
	$("#tuipiao").css("display","none");
	$("#weizf").css("display","none");
});
$("#tp").click(function(){
	$("#both").css("display","none");
	$("#yizf").css("display","none");
	$("#wancheng").css("display","none");
	$("#tuipiao").css("display","block");
	$("#weizf").css("display","none");
});
$("#all").click(function(){
	$("#both").css("display","block");
	$("#yizf").css("display","none");
	$("#wancheng").css("display","none");
	$("#tuipiao").css("display","none");
	$("#weizf").css("display","none");
});
$(".out").click(function(){
	var id=$(this).prev().val();
	
$.ajax({  
        type:"POST",  
        url:"/VipChangeStateServlet",  
        data:{  
              "id":id ,"flag":"out"       	
        },  
        dataType:"json",  
        success:function (data) {  
        	
        	if(data==1){
        		alert("出票成功");
        		window.location.reload();
        	}else{
        		alert("出票失败")
        	}
        },
        error:function(){
        	alert("当前服务正忙，请稍后重试")
        }
    }) 
});
$(".tui").click(function(){
	
	var id=$(this).prev().prev().val();
	var money=$(this).parent().prev().prev().html();
	var zuotype=$(this).parent().prev().prev().prev().html();
	var date=$(this).parent().prev().prev().prev().prev().html();
	var time=$(this).parent().prev().prev().prev().prev().prev().prev().html();
	var car=$(this).parent().prev().prev().prev().prev().prev().prev().prev().prev().prev().html();
	var name=$(this).parent().prev().prev().prev().prev().prev().prev().prev().prev().prev().prev().html();
	
	var bmoney=money*0.8*100;
	bmoney=Math.floor(parseFloat(bmoney))/100;
	//alert(bmoney)
	var da=date.replace("年","-");
	 da=da.replace("月","-");
	 da=da.substring(0,da.length-1)
	 var cda=da;
	  da=da+" "+time; 
	 //alert(da)
    $.ajax({  
        type:"POST",  
        url:"/VipChangeStateServlet",  
        data:{  
              "id":id ,
              "flag":"tui" , 
              "zuotype":zuotype,
              "date":da, 
              'da':cda,
              "car":car,
              "name":name,
              "time":time
        },  
        dataType:"json",  
        success:function (data) {  
        	if(data==1){
        		alert("退票成功，退还您付款账户"+bmoney+"元！");
        		$(this).parent().parent().css("display","none");
        		window.location.reload();
        	}else if(data==2){
        		alert("该班车已经出发了，不能退票")
        	}else{
        		alert("修改失败")
        	}
        },
        error:function(){
        	alert("当前服务正忙，请稍后重试")
        }
    })     
}); 
$("tr:even").css("background","lightblue")
});

function zhifu(oop){
	$(oop).text("正在支付...")
	$("#pay").toggle(300);
	var oid=$(oop).prev().val();
	var money=$(oop).parent().prev().prev().html();
	var zuotype=$(oop).parent().prev().prev().prev().html();
	var date=$(oop).parent().prev().prev().prev().prev().html();
	var time=$(oop).parent().prev().prev().prev().prev().prev().prev().html();
	var car=$(oop).parent().prev().prev().prev().prev().prev().prev().prev().prev().prev().html();
	
	var da=date.replace("年","-");
	 da=da.replace("月","-");
	 da=da.substring(0,da.length-1)
	 var cdate=da;
	$("#oid").val(oid)
	$("#zuotype").val(zuotype)
	$("#date").val(date)
	$("#carname").val(car)
	$("#time").val(time)
	 $("#qian").text(money)
	/*  $(oop).parent().parent().css("display","none"); */

	
}
function tijiao(){
	 
	if($("#pass").val()==666666){
		
		var oid=$("#oid").val()
		var zuotype=$("#zuotype").val()
		var time=$("#time").val()
		var date=$("#date").val()
		var car = $("#carname").val()
		var da=date.replace("年","-");
	     da=da.replace("月","-");
	     da=da.substring(0,da.length-1)
	     var cdate=da;
		$.ajax({  
		        type:"POST",  
		        url:"/UserZhiFuServlet",  
		        data:{  
		              "oid":oid ,
		              "zuotype":zuotype , 		              
		              "cdate":cdate, 
		              "carname":car,
		              "time":time
		              
		        },  
		        //dataType:"json",  
		        success:function (data) {  
		             alert(data)
		        	$("#pay").hide(300);
		        },
		        error:function(){
		        	alert("当前服务正忙，请稍后重试")
		        }
		    })
	}else{
		alert("密码有误，请重新输入")
	}
	
}

</script>
</head>

<body>
	<div id="main">
		<div id="menu">
			<span id="all" class="m1"><a href="#">用户订单</a></span>
			<span id="wzf" class="m1"><a href="#">未支付订单</a></span>
			<span id="yzf" class="m1"><a href="#">已支付订单</a></span>
			<span id="ywc" class="m1"><a href="#">已完成订单</a></span>
			<span id="tp" class="m1"><a href="#">退票订单</a></span>
		</div>
	</div>
<c:choose>
<c:when test="${!empty list }">
<div id="both">
	<table border=1px>
		<tr>
			<th>订单编号</th>
			<th>用户名</th>
			<th>车次</th>
			<th>起点</th>
			<th>终点</th>
			<th>发车时间</th>
			<th>到站时间</th>
			<th>发车日期</th>
			<th>座位类型</th>
			<th>票价</th>
			<th>订单状态</th>
		</tr>
		<c:forEach items="${list }" var="l">	
	
			<tr>		
			<td>${l.onum }</td>
			<td>${l.name }</td>
			
			<td>${l.cname }</td>
			<td>${l.action }</td>
			<td>${l.over }</td>
			<td>${l.starttime }</td>
			<td>${l.endtime }</td>
			<td><fmt:formatDate value="${l.actiondate }" pattern="yyyy年MM月dd日" /></td>
			<td>${l.zuotype }</td>
			<td>${l.price }</td>
			<c:choose>
				<c:when test="${l.state eq '0' }">
				<td>未支付</td>
				</c:when>
				<c:otherwise>
					<c:choose>
						<c:when test="${l.state eq '1'}">
							<td>已支付</td>							
						</c:when>
						<c:otherwise>
							<c:choose>
								<c:when test="${l.state eq '2'}">
								<td>订单已完成</td>								
								</c:when>
								<c:otherwise>									
									<td>退票</td>									
								</c:otherwise>
							</c:choose>
						</c:otherwise>
					</c:choose>
				</c:otherwise>		
			</c:choose>
		</tr>
		
	</c:forEach>
	</table>
	</div>
	<div id="weizf" style="display:none">
	<table border=1px>
		<tr>
			<th>订单编号</th>
			<th>用户名</th>
			<th>车次</th>
			<th>起点</th>
			<th>终点</th>
			<th>发车时间</th>
			<th>到站时间</th>
			<th>发车日期</th>
			<th>座位类型</th>
			<th>票价</th>
			<th>订单状态</th>
			<th>操作</th>
		</tr>
		<c:forEach items="${list }" var="l">
			
			<c:choose>
				<c:when test="${l.state eq '0' }">
			<tr>		
			<td>${l.onum}</td>
			<td>${l.name }</td>
			<td>${l.cname }</td>
			<td>${l.action }</td>
			<td>${l.over }</td>
			<td>${l.starttime }</td>
			<td>${l.endtime }</td>
			<td><fmt:formatDate value="${l.actiondate }" pattern="yyyy年MM月dd日" /></td>
			<td>${l.zuotype }</td>
			<td>${l.price }</td>
			<td>未支付</td>
			<td><input type="hidden"  value="${l.oid }"><a href="#" id="qu" onclick="zhifu(this)">去付款</a></td>
			</tr>
			</c:when>
			<%-- <c:otherwise>
			<h2>您还沒有未付款订单信息</h2>
			</c:otherwise>	 --%>
			</c:choose>
	
	</c:forEach>
	</table>
	</div>
	<div id="yizf" style="display:none">
			<table border=1px>
		<tr>
			<th>订单编号</th>
			<th>用户名</th>
			<th>车次</th>
			<th>起点</th>
			<th>终点</th>
			<th>发车时间</th>
			<th>到站时间</th>
			<th>发车日期</th>
			<th>座位类型</th>
			<th>票价</th>
			<th>订单状态</th>
			<th>操作</th>
		</tr>
		<c:forEach items="${list }" var="l">
			<c:choose>
				<c:when test="${l.state eq '1' }">
			<tr>
	
			<td>${l.onum}</td>
			<td>${l.name }</td>
			<td>${l.cname }</td>
			<td>${l.action }</td>
			<td>${l.over }</td>
			<td>${l.starttime }</td>
			<td>${l.endtime }</td>
			<td><fmt:formatDate value="${l.actiondate }" pattern="yyyy年MM月dd日" /></td>
			<td>${l.zuotype }</td>
			<td>${l.price }</td>
			<td>已支付</td>	
			<td><input type="hidden"  value="${l.oid }"><a href="#" class="out"> 出票</a>  || <a href="#" class="tui"> 退票</a></td>
			</tr>
			</c:when>
			<%-- <c:otherwise>				
					<c:if test="${l.state ne '0' && l.state ne '2'  }">
						<h2>您还沒有已經支付的订单信息</h2>
					</c:if>							
			</c:otherwise>  --%>
			</c:choose>
	</c:forEach>
	</table>
	</div>
	<div id="wancheng" style="display:none">
			<table border=1px>
		<tr>
			<th>订单编号</th>
			<th>用户名</th>
			<th>车次</th>
			<th>起点</th>
			<th>终点</th>
			<th>发车时间</th>
			<th>到站时间</th>
			<th>发车日期</th>
			<th>座位类型</th>
			<th>票价</th>
			<th>订单状态</th>
		</tr>
		<c:forEach items="${list }" var="l">
			<c:choose>
				<c:when test="${l.state eq '2' }">
			<tr>		
			<td>${l.onum}</td>
			<td>${l.name }</td>
			<td>${l.cname }</td>
			<td>${l.action }</td>
			<td>${l.over }</td>
			<td>${l.starttime }</td>
			<td>${l.endtime }</td>
			<td><fmt:formatDate value="${l.actiondate }" pattern="yyyy年MM月dd日" /></td>
			<td>${l.zuotype }</td>
			<td>${l.price }</td>
			<td>已完成</td>
			</tr>
			</c:when>
			<%-- <c:otherwise>
			<h2>您还沒有已經完成的订单信息</h2>
			</c:otherwise> --%>	
			</c:choose>
	</c:forEach>
	</table>
	</div>
	<div id="tuipiao" style="display:none">
			<table border=1px>
		<tr>
			<th>订单编号</th>
			<th>用户名</th>
			<th>车次</th>
			<th>起点</th>
			<th>终点</th>
			<th>发车时间</th>
			<th>到站时间</th>
			<th>发车日期</th>
			<th>座位类型</th>
			<th>票价</th>
			<th>订单状态</th>
		</tr>
		<c:forEach items="${list }" var="l">
			<c:choose>
				<c:when test="${l.state eq '3' }">
			<tr>		
			<td>${l.onum}</td>
			<td>${l.name }</td>
			<td>${l.cname }</td>
			<td>${l.action }</td>
			<td>${l.over }</td>
			<td>${l.starttime }</td>
			<td>${l.endtime }</td>
			<td><fmt:formatDate value="${l.actiondate }" pattern="yyyy年MM月dd日" /></td>
			<td>${l.zuotype }</td>
			<td>${l.price }</td>
			<td>已退票</td>				
			</tr>
			</c:when>	
			<%-- <c:otherwise>
			<h2>您还沒有退票的订单信息</h2>
			</c:otherwise> --%>
			</c:choose>
	</c:forEach>
	</table>
	</div>
</c:when>
<c:otherwise>
	<h2>您还没有订单信息</h2>
</c:otherwise>
</c:choose>
<div id="pay" style="    border: 1px solid;
    width: 424px;
    height: 155px;
    font-size: 18px;
    color: lightseagreen;
    line-height: 43px;
    background-color: lightgoldenrodyellow;
    margin-left: auto;
    margin-right: auto; display:none">
<div style=" margin-left: 53px;margin-top: 20px;
">
 <span>您需要付的金额共：</span><span id="qian" style="    color: orangered;"> </span> </div>
 <span style="margin-left: 49px;"> 请输入支付密码：</span>

   <input type="password" id="pass">
   <input type="hidden" id="oid">
   <input type="hidden" id="zuotype">
   <input type="hidden" id="piaoshu">
   <input type="hidden" id="date">
   <input type="hidden" id="carname">
   <input type="hidden" id="time">
   <div><input type="submit" value="支付" onclick="tijiao()" style="margin-left: 148px;
    margin-top: 11px;
    outline:none;
    width: 87px;
    height: 28px;
    border-radius: 50% 50% 0% 5%;
    color: lightseagreen;
    background-color: lightskyblue;
    font-size: 18px;
    font-weight: 700;
"></div>
</div>
</body>
</html>